import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Input, message } from 'antd';
import { ModalC, ProductGroupTreeC, InputC, InputNumberC, SelectC } from '../../../comps';
import { isZiGuanEvir } from '../../../utils/commonFunc';
const FormItem = Form.Item;
import { connect } from 'dva';
const { TextArea } = Input;

@Form.create()
@connect(({ fundManageNewM }) => ({ fundManageNewM }))
export default class cashDepositModalC extends PureComponent {
  // 表单
  addForm = () => {
    const { getFieldDecorator } = this.props.form;
    const { rowData } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 5, offset: 0 },
        sm: { span: 8, offset: 0 },
        md: { span: 8, offset: 0 },
        lg: { span: 8, offset: 0 },
        xl: { span: 8, offset: 0 },
        xxl: { span: 8, offset: 0 },
      },
      wrapperCol: {
        xs: { span: 17, offset: 0 },
        sm: { span: 16, offset: 0 },
        md: { span: 16, offset: 0 },
        lg: { span: 16, offset: 0 },
        xl: { span: 16, offset: 0 },
        xxl: { span: 16, offset: 0 },
      },
    };
    const formItemLayout1 = {
      labelCol: {
        xs: { span: 1, offset: 0 },
        sm: { span: 4, offset: 0 },
        md: { span: 4, offset: 0 },
        lg: { span: 4, offset: 0 },
        xl: { span: 4, offset: 0 },
        xxl: { span: 4, offset: 0 },
      },
      wrapperCol: {
        xs: { span: 21, offset: 0 },
        sm: { span: 20, offset: 0 },
        md: { span: 20, offset: 0 },
        lg: { span: 20, offset: 0 },
        xl: { span: 20, offset: 0 },
        xxl: { span: 20, offset: 0 },
      },
    };
    return (
      <div>
        <Form style={{ marginLeft: '20px' }}>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={12}>
              <ProductGroupTreeC
                form={this.props.form}
                formItemLayout={formItemLayout}
                title={'产品组合'}
                dataIndex='comb'
                disabled={true}
                multiple={false}
                initialValue={rowData.portfolioId || ''}
              />
            </Col>
            <Col span={12}>
              <InputNumberC
                dataIndex='availableCash'
                title={'现金可用'}
                precision={2}
                unit={'元'}
                // splitStyle={true}
                form={this.props.form}
                formItemLayout={formItemLayout}
                // 现金可用 = T+0可用
                initialValue={rowData.tZeroAvailableFund || 0}
                formatter={(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                disabled={true}
              />
            </Col>
          </Row>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={12}>
              <InputNumberC
                dataIndex='availableMargin'
                title={'保证金可用'}
                precision={2}
                unit={'元'}
                splitStyle={true}
                form={this.props.form}
                formItemLayout={formItemLayout}
                initialValue={rowData.availableMargin || 0}
                disabled={true}
              />
            </Col>
            <Col span={12}>
              <SelectC
                dataIndex='cashAction'
                title={'资金操作'}
                rules={[{ required: true, message: '请选择资金操作' }]}
                placeholder='请选择资金操作'
                // “银期转账”改成“现转期”，“期银转账”改为“期转现”
                dataSource={[
                  { value: '1', title: '现转期' },
                  { value: '2', title: '期转现' },
                ]}
                form={this.props.form}
                formItemLayout={formItemLayout}
              />
            </Col>
          </Row>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={12}>
              <InputNumberC
                dataIndex='amount'
                title={'发生金额'}
                precision={2}
                min={0}
                unit={'元'}
                rules={[{ required: true, message: '请填写发生金额' }]}
                placeholder='请填写发生金额'
                splitStyle={true}
                form={this.props.form}
                formItemLayout={formItemLayout}
              />
            </Col>
          </Row>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={24}>
              <FormItem label='备注' {...formItemLayout1}>
                {getFieldDecorator('remark', {})(<TextArea maxLength={256} placeholder='' />)}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    );
  };
  // 修改visible
  changeModalVisible = (msg) => {
    this.props.changeModalVisible(msg);
  };

  onFundModalOk = () => {
    const that = this;
    // 操作提交了
    const {
      form: { validateFields },
      dispatch,
      rowData,
    } = this.props;
    validateFields((error, values) => {
      if (!error) {
        // 现转期：判断【现金可用】 >= 【发生金额】
        /**
         * 1-现转期（期货保证金增加）
         * 2-期转现（期货保证金减少）
         */
        if (values.amount == 0) {
          message.error('发生金额需要大于0！');
          return;
        }
        if (values.cashAction === '1' && values.availableCash < values.amount) {
          message.error('现转期，发生金额需要小于现金可用！');
          return;
        }
        if (values.cashAction === '2' && values.availableMargin < values.amount) {
          message.error('期转现，发生金额需要小于保证金可用！');
          return;
        }
        let params = {
          id: rowData.key,
          code: rowData.combCode,
          name: rowData.combName,
          type: values.cashAction,
          cash: values.amount,
          remark: values.remark,
          operateBy: isZiGuanEvir() ? isZiGuanEvir()['iv-user'] : localStorage.getItem('antd-pro-userId'),
        };
        // 调接口
        dispatch({
          type: 'fundManageNewM/operationBzj',
          payload: {
            ...params,
          },
        }).then((res) => {
          if (res && res.success) {
            message.success('操作成功');
            this.changeModalVisible(false);
            this.props.getResult(true);
          } else {
            message.error(res?.errorMsg || '操作失败');
          }
        });
      }
    });
  };
  render() {
    const { modalProps } = this.props;
    return (
      <ModalC {...modalProps} onOk={this.onFundModalOk}>
        {this.addForm()}
      </ModalC>
    );
  }
}
